<template>
  <view class="register-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>
    
    <!-- 注册卡片 -->
    <view class="register-card">
      <!-- 头部区域 -->
      <view class="header">
        <view class="logo">
          <text class="logo-icon">📱</text>
        </view>
        <text class="welcome-text">创建账号</text>
        <text class="subtitle">请填写注册信息</text>
      </view>
      
      <!-- 注册表单 -->
      <view class="form-container">
        <!-- 角色选择 -->
        <view class="form-group">
          <text class="form-label">账号类型</text>
          <view class="role-selector">
            <view 
              class="role-option" 
              :class="{ active: formData.role === 'customer' }"
              @click="selectRole('customer')"
            >
              <text class="role-icon">👤</text>
              <view class="role-info">
                <text class="role-name">普通用户</text>
                <text class="role-desc">点餐、拼单</text>
              </view>
            </view>
            <view 
              class="role-option" 
              :class="{ active: formData.role === 'merchant' }"
              @click="selectRole('merchant')"
            >
              <text class="role-icon">🏪</text>
              <view class="role-info">
                <text class="role-name">商家</text>
                <text class="role-desc">开店、接单</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="form-group">
          <text class="form-label">用户名</text>
          <view class="input-wrapper">
            <input 
              class="form-input" 
              type="text" 
              placeholder="请输入用户名（3-20位）"
              v-model="formData.username"
              :class="{ 'error': errors.username }"
              @input="validateUsername"
            />
            <text class="input-icon">👤</text>
          </view>
          <text class="error-text" v-if="errors.username">{{ errors.username }}</text>
        </view>
        
        <view class="form-group">
          <text class="form-label">邮箱地址</text>
          <view class="input-wrapper">
            <input 
              class="form-input" 
              type="text" 
              placeholder="请输入邮箱地址"
              v-model="formData.email"
              :class="{ 'error': errors.email }"
              @input="validateEmail"
            />
            <text class="input-icon">📧</text>
          </view>
          <text class="error-text" v-if="errors.email">{{ errors.email }}</text>
        </view>
        
        <view class="form-group">
          <text class="form-label">邮箱验证码</text>
          <view class="input-wrapper code-wrapper">
            <input 
              class="form-input" 
              type="text" 
              placeholder="请输入验证码"
              v-model="formData.emailCode"
              maxlength="6"
              :class="{ 'error': errors.emailCode }"
              @input="validateEmailCode"
            />
            <button 
              class="code-btn" 
              :disabled="codeSending || countdown > 0 || !formData.email || !!errors.email"
              @click="sendCode"
            >
              {{ codeButtonText }}
            </button>
          </view>
          <text class="error-text" v-if="errors.emailCode">{{ errors.emailCode }}</text>
        </view>
        
        <view class="form-group">
          <text class="form-label">密码</text>
          <view class="input-wrapper">
            <input 
              class="form-input" 
              :type="showPassword ? 'text' : 'password'"
              placeholder="请输入密码"
              v-model="formData.password"
              :class="{ 'error': errors.password }"
              @input="validatePassword"
            />
            <text class="input-icon" @click="togglePassword">
              {{ showPassword ? '👁️' : '🔒' }}
            </text>
          </view>
          <text class="error-text" v-if="errors.password">{{ errors.password }}</text>
        </view>
        
        <view class="form-group">
          <text class="form-label">确认密码</text>
          <view class="input-wrapper">
            <input 
              class="form-input" 
              :type="showConfirmPassword ? 'text' : 'password'"
              placeholder="请再次输入密码"
              v-model="formData.confirmPassword"
              :class="{ 'error': errors.confirmPassword }"
              @input="validateConfirmPassword"
            />
            <text class="input-icon" @click="toggleConfirmPassword">
              {{ showConfirmPassword ? '👁️' : '🔒' }}
            </text>
          </view>
          <text class="error-text" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</text>
        </view>
        
        <!-- 商家信息（仅商家角色显示） -->
        <view v-if="formData.role === 'merchant'" class="merchant-section">
          <view class="section-title">
            <text class="title-icon">🏪</text>
            <text class="title-text">商家信息</text>
          </view>
          
          <view class="form-group">
            <text class="form-label">店铺名称</text>
            <view class="input-wrapper">
              <input 
                class="form-input" 
                type="text" 
                placeholder="请输入店铺名称"
                v-model="formData.merchantName"
                :class="{ 'error': errors.merchantName }"
                @input="validateMerchantName"
              />
              <text class="input-icon">🏪</text>
            </view>
            <text class="error-text" v-if="errors.merchantName">{{ errors.merchantName }}</text>
          </view>
          
          <view class="form-group">
            <text class="form-label">店铺地址</text>
            <view class="input-wrapper">
              <input 
                class="form-input" 
                type="text" 
                placeholder="例如：深圳市南山区科技园南区深南大道1001号"
                v-model="formData.merchantAddress"
                :class="{ 'error': errors.merchantAddress }"
                @input="validateMerchantAddress"
              />
              <text class="input-icon">📍</text>
            </view>
            <text class="hint-text" v-if="!errors.merchantAddress && formData.merchantAddress">
              {{ formData.merchantAddress.length }}/200 字符
            </text>
            <text class="error-text" v-if="errors.merchantAddress">{{ errors.merchantAddress }}</text>
          </view>
          
          <view class="form-group">
            <text class="form-label">店铺电话</text>
            <view class="input-wrapper">
              <input 
                class="form-input" 
                type="text" 
                placeholder="请输入店铺联系电话"
                v-model="formData.merchantPhone"
                :class="{ 'error': errors.merchantPhone }"
                @input="validateMerchantPhone"
              />
              <text class="input-icon">📞</text>
            </view>
            <text class="error-text" v-if="errors.merchantPhone">{{ errors.merchantPhone }}</text>
          </view>
          
          <view class="form-group">
            <text class="form-label">店铺简介（选填）</text>
            <view class="input-wrapper">
              <textarea 
                class="form-textarea" 
                placeholder="请简单介绍您的店铺特色"
                v-model="formData.merchantDescription"
                maxlength="200"
              />
            </view>
          </view>
        </view>
        
        <!-- 协议区域 -->
        <view class="agreement">
          <view class="agreement-checkbox" @click="toggleAgreement">
            <view class="checkbox" :class="{ 'checked': formData.agreement }">
              <text class="checkmark" v-if="formData.agreement">✓</text>
            </view>
            <text class="agreement-text">
              我已阅读并同意
              <text class="agreement-link" @click.stop="showUserAgreement">《用户协议》</text>
              和
              <text class="agreement-link" @click.stop="showPrivacyPolicy">《隐私政策》</text>
            </text>
          </view>
          <text class="agreement-hint" v-if="!formData.agreement">
            ⚠️ 请先勾选同意协议才能注册
          </text>
        </view>
        
        <!-- 注册按钮 -->
        <button 
          class="register-btn" 
          :class="{ 'loading': isLoading }"
          :disabled="!isFormValid || isLoading"
          @click="handleRegister"
        >
          <text v-if="!isLoading">注册</text>
          <text v-else>注册中...</text>
        </button>
        
        <!-- 登录链接 -->
        <view class="login-link">
          <text class="login-text">已有账号？</text>
          <text class="login-btn" @click="goToLogin">立即登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import authService from '../../services/auth.js'
import { smartBack } from '../../utils/navigation.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      formData: {
        role: 'customer', // 默认为普通用户
        username: '',
        email: '',
        emailCode: '',
        password: '',
        confirmPassword: '',
        // 商家信息
        merchantName: '',
        merchantAddress: '',
        merchantPhone: '',
        merchantDescription: '',
        agreement: false
      },
      errors: {
        username: '',
        email: '',
        emailCode: '',
        password: '',
        confirmPassword: '',
        // 商家信息错误
        merchantName: '',
        merchantAddress: '',
        merchantPhone: ''
      },
      showPassword: false,
      showConfirmPassword: false,
      isLoading: false,
      
      // 验证码相关
      codeSending: false,
      countdown: 0,
      countdownTimer: null
    }
  },
  computed: {
    isFormValid() {
      const baseValid = this.formData.username.length >= 3 && 
             this.formData.email &&
             this.formData.emailCode.length === 6 &&
             this.formData.password.length >= 6 &&
             this.formData.confirmPassword === this.formData.password &&
             this.formData.agreement &&
             !this.errors.username &&
             !this.errors.email &&
             !this.errors.emailCode &&
             !this.errors.password &&
             !this.errors.confirmPassword
      
      // 如果是商家，还需验证商家信息
      if (this.formData.role === 'merchant') {
        return baseValid &&
               this.formData.merchantName &&
               this.formData.merchantAddress &&
               this.formData.merchantPhone &&
               !this.errors.merchantName &&
               !this.errors.merchantAddress &&
               !this.errors.merchantPhone
      }
      
      return baseValid
    },
    
    codeButtonText() {
      if (this.codeSending) return '发送中...'
      if (this.countdown > 0) return `${this.countdown}秒`
      return '获取验证码'
    }
  },
  onLoad() {
    this.getStatusBarHeight()
  },
  methods: {
    // 获取状态栏高度
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 20
    },
    
    // 选择角色
    selectRole(role) {
      this.formData.role = role
      // 切换角色时清空商家信息错误
      if (role === 'customer') {
        this.errors.merchantName = ''
        this.errors.merchantAddress = ''
        this.errors.merchantPhone = ''
      }
    },
    
    // 验证用户名
    validateUsername() {
      const username = this.formData.username.trim()
      if (username.length < 3) {
        this.errors.username = '用户名至少3个字符'
      } else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(username)) {
        this.errors.username = '用户名只能包含字母、数字、下划线和中文'
      } else {
        this.errors.username = ''
      }
    },
    
    // 验证邮箱
    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!this.formData.email) {
        this.errors.email = '请输入邮箱地址'
      } else if (!emailRegex.test(this.formData.email)) {
        this.errors.email = '请输入正确的邮箱格式'
      } else {
        this.errors.email = ''
      }
    },
    
    // 验证邮箱验证码
    validateEmailCode() {
      if (!this.formData.emailCode) {
        this.errors.emailCode = '请输入验证码'
      } else if (this.formData.emailCode.length !== 6) {
        this.errors.emailCode = '验证码为6位数字'
      } else {
        this.errors.emailCode = ''
      }
    },
    
    // 发送邮箱验证码
    async sendCode() {
      this.validateEmail()
      if (this.errors.email) return
      
      this.codeSending = true
      
      try {
        console.log('📧 发送验证码到:', this.formData.email)
        
        await authService.sendEmailCode({
          email: this.formData.email,
          type: 'register'
        })
        
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })
        
        // 开始倒计时
        this.countdown = 60
        this.countdownTimer = setInterval(() => {
          this.countdown--
          if (this.countdown <= 0) {
            clearInterval(this.countdownTimer)
          }
        }, 1000)
        
      } catch (error) {
        console.error('发送验证码失败:', error)
        uni.showToast({
          title: error.message || '发送失败',
          icon: 'none'
        })
      } finally {
        this.codeSending = false
      }
    },
    
    // 验证密码
    validatePassword() {
      const password = this.formData.password
      if (password.length < 6) {
        this.errors.password = '密码至少6个字符'
      } else if (!/^(?=.*[a-zA-Z])(?=.*\d).+$/.test(password)) {
        this.errors.password = '密码必须包含字母和数字'
      } else {
        this.errors.password = ''
      }
      // 重新验证确认密码
      this.validateConfirmPassword()
    },
    
    // 验证确认密码
    validateConfirmPassword() {
      const password = this.formData.password
      const confirmPassword = this.formData.confirmPassword
      if (confirmPassword.length === 0) {
        this.errors.confirmPassword = ''
      } else if (password !== confirmPassword) {
        this.errors.confirmPassword = '两次输入的密码不一致'
      } else {
        this.errors.confirmPassword = ''
      }
    },
    
    
    // 切换密码显示
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    
    // 切换确认密码显示
    toggleConfirmPassword() {
      this.showConfirmPassword = !this.showConfirmPassword
    },
    
    // 切换协议同意
    toggleAgreement() {
      this.formData.agreement = !this.formData.agreement
    },
    
    // 验证商家名称
    validateMerchantName() {
      if (!this.formData.merchantName) {
        this.errors.merchantName = '请输入店铺名称'
      } else if (this.formData.merchantName.length < 2) {
        this.errors.merchantName = '店铺名称至少2个字符'
      } else {
        this.errors.merchantName = ''
      }
    },
    
    // 验证商家地址
    validateMerchantAddress() {
      if (!this.formData.merchantAddress) {
        this.errors.merchantAddress = '请输入店铺地址'
      } else if (this.formData.merchantAddress.length < 5) {
        this.errors.merchantAddress = '请输入详细的店铺地址'
      } else {
        this.errors.merchantAddress = ''
      }
    },
    
    // 验证商家电话
    validateMerchantPhone() {
      const phoneRegex = /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/
      if (!this.formData.merchantPhone) {
        this.errors.merchantPhone = '请输入店铺电话'
      } else if (!phoneRegex.test(this.formData.merchantPhone.replace(/\s+/g, ''))) {
        this.errors.merchantPhone = '请输入正确的电话号码'
      } else {
        this.errors.merchantPhone = ''
      }
    },
    
    
    // 清理倒计时
    onUnload() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
      }
    },
    
    // 处理注册
    async handleRegister() {
      // 检查是否同意协议
      if (!this.formData.agreement) {
        uni.showToast({
          title: '请先阅读并同意用户协议',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      if (!this.isFormValid) {
        // 提示用户哪些字段未填写
        if (!this.formData.username || this.formData.username.length < 3) {
          uni.showToast({
            title: '请输入正确的用户名',
            icon: 'none'
          })
        } else if (!this.formData.email || this.errors.email) {
          uni.showToast({
            title: '请输入正确的邮箱地址',
            icon: 'none'
          })
        } else if (!this.formData.emailCode || this.formData.emailCode.length !== 6) {
          uni.showToast({
            title: '请输入6位验证码',
            icon: 'none'
          })
        } else if (!this.formData.password || this.formData.password.length < 6) {
          uni.showToast({
            title: '请输入至少6位密码',
            icon: 'none'
          })
        } else if (this.formData.password !== this.formData.confirmPassword) {
          uni.showToast({
            title: '两次密码输入不一致',
            icon: 'none'
          })
        } else if (this.formData.role === 'merchant') {
          // 商家信息验证
          if (!this.formData.merchantName) {
            uni.showToast({
              title: '请输入店铺名称',
              icon: 'none'
            })
          } else if (!this.formData.merchantAddress) {
            uni.showToast({
              title: '请输入店铺地址',
              icon: 'none'
            })
          } else if (!this.formData.merchantPhone) {
            uni.showToast({
              title: '请输入店铺电话',
              icon: 'none'
            })
          }
        }
        return
      }
      
      this.isLoading = true
      
      try {
        console.log('📝 注册用户:', this.formData.username, '角色:', this.formData.role)
        
        // 构建注册参数
        const registerData = {
          username: this.formData.username,
          email: this.formData.email,
          emailCode: this.formData.emailCode,
          password: this.formData.password,
          role: this.formData.role
        }
        
        // 如果是商家，添加商家信息
        if (this.formData.role === 'merchant') {
          registerData.merchantInfo = {
            name: this.formData.merchantName,
            address: this.formData.merchantAddress,
            phone: this.formData.merchantPhone,
            description: this.formData.merchantDescription || ''
          }
          console.log('🏪 商家信息:', registerData.merchantInfo)
        }
        
        // 调用注册接口
        const response = await authService.register(registerData)
        
        const roleText = this.formData.role === 'merchant' ? '商家' : '用户'
        uni.showToast({
          title: `${roleText}注册成功`,
          icon: 'success'
        })
        
        // 注册成功后根据角色跳转到对应首页
        setTimeout(() => {
          if (this.formData.role === 'merchant') {
            // 商家跳转到商家首页
            uni.reLaunch({
              url: '/pages/merchant/home/home'
            })
          } else {
            // 普通用户跳转到用户首页
            uni.reLaunch({
              url: '/pages/home/home'
            })
          }
        }, 1500)
        
      } catch (error) {
        console.error('注册失败:', error)
        uni.showToast({
          title: error.message || '注册失败',
          icon: 'error'
        })
      } finally {
        this.isLoading = false
      }
    },
    
    // 模拟注册请求
    mockRegister() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
        // 模拟注册逻辑
        if (this.formData.username === 'admin') {
          reject(new Error('用户名已存在'))
        } else {
          resolve()
        }
        }, 2000)
      })
    },
    
    // 显示用户协议
    showUserAgreement() {
      uni.showModal({
        title: '用户协议',
        content: '这里是用户协议的内容...',
        showCancel: false
      })
    },
    
    // 显示隐私政策
    showPrivacyPolicy() {
      uni.showModal({
        title: '隐私政策',
        content: '这里是隐私政策的内容...',
        showCancel: false
      })
    },
    
    // 跳转到登录页面
    goToLogin() {
      smartBack('/pages/login/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #a6c0fe 0%, #c2a8fd 100%);
  position: relative;
  overflow: hidden;
}

.status-bar {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
  }
  
  .circle-1 {
    width: 200rpx;
    height: 200rpx;
    top: 10%;
    right: -50rpx;
    animation-delay: 0s;
  }
  
  .circle-2 {
    width: 150rpx;
    height: 150rpx;
    top: 60%;
    left: -30rpx;
    animation-delay: 2s;
  }
  
  .circle-3 {
    width: 100rpx;
    height: 100rpx;
    top: 30%;
    left: 20%;
    animation-delay: 4s;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.register-card {
  position: relative;
  margin: 40rpx 40rpx 60rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  backdrop-filter: blur(20px);
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .logo {
    width: 120rpx;
    height: 120rpx;
    background: linear-gradient(135deg, #a6c0fe 0%, #c2a8fd 100%);
    border-radius: 24rpx;
    margin: 0 auto 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .logo-icon {
      font-size: 60rpx;
    }
  }
  
  .welcome-text {
    display: block;
    font-size: 48rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .subtitle {
    display: block;
    font-size: 28rpx;
    color: #666;
  }
}

.form-container {
  .form-group {
    margin-bottom: 32rpx;
    
    .form-label {
      display: block;
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
    }
    
    .form-textarea {
      width: 100%;
      min-height: 120rpx;
      background: #f8f9fa;
      border: 2rpx solid #e1e5e9;
      border-radius: 16rpx;
      padding: 20rpx;
      font-size: 28rpx;
      color: #333;
      box-sizing: border-box;
      line-height: 1.6;
      
      &:focus {
        border-color: #a6c0fe;
        background: #fff;
      }
    }
    
    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      
      .form-input {
        flex: 1;
        height: 88rpx;
        background: #f8f9fa;
        border: 2rpx solid #e1e5e9;
        border-radius: 16rpx;
        padding: 0 60rpx 0 20rpx;
        font-size: 32rpx;
        color: #333;
        transition: all 0.3s ease;
        box-sizing: border-box;
        
        &.error {
          border-color: #ff4757;
          background: #fff5f5;
        }
        
        &:focus {
          border-color: #a6c0fe;
          background: #fff;
          box-shadow: 0 0 0 6rpx rgba(166, 192, 254, 0.1);
        }
      }
      
      .input-icon {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 32rpx;
        color: #999;
        cursor: pointer;
      }
    }
    
    .code-wrapper {
      display: flex;
      gap: 10rpx;
      
      .form-input {
        flex: 1;
        padding: 0 20rpx;
      }
      
      .code-btn {
        width: 180rpx;
        height: 88rpx;
        background: linear-gradient(135deg, #a6c0fe 0%, #c2a8fd 100%);
        color: #fff;
        font-size: 24rpx;
        border-radius: 12rpx;
        border: none;
        flex-shrink: 0;
        
        &::after {
          border: none;
        }
        
        &[disabled] {
          background: #ddd;
          color: #999;
        }
      }
    }
    
    .error-text {
      display: block;
      font-size: 24rpx;
      color: #ff4757;
      margin-top: 8rpx;
    }
    
    .hint-text {
      display: block;
      font-size: 22rpx;
      color: #999;
      margin-top: 8rpx;
    }
  }
  
  // 角色选择样式
  .role-selector {
    display: flex;
    gap: 20rpx;
    
    .role-option {
      flex: 1;
      padding: 24rpx 20rpx;
      background: #f8f9fa;
      border: 2rpx solid #e1e5e9;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      gap: 16rpx;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      &.active {
        background: linear-gradient(135deg, rgba(166, 192, 254, 0.1) 0%, rgba(194, 168, 253, 0.1) 100%);
        border-color: #a6c0fe;
        box-shadow: 0 0 0 6rpx rgba(166, 192, 254, 0.1);
      }
      
      .role-icon {
        font-size: 48rpx;
        flex-shrink: 0;
      }
      
      .role-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4rpx;
        
        .role-name {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
        
        .role-desc {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }
  
  // 商家信息区域样式
  .merchant-section {
    margin-top: 20rpx;
    padding: 30rpx 20rpx;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 152, 0, 0.05) 100%);
    border-radius: 16rpx;
    border: 2rpx solid rgba(255, 193, 7, 0.2);
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 24rpx;
      
      .title-icon {
        font-size: 36rpx;
      }
      
      .title-text {
        font-size: 30rpx;
        font-weight: 700;
        color: #333;
      }
    }
    
    .form-group {
      margin-bottom: 24rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  .agreement {
    margin-bottom: 40rpx;
    
    .agreement-checkbox {
      display: flex;
      align-items: flex-start;
      cursor: pointer;
      
      .checkbox {
        width: 32rpx;
        height: 32rpx;
        border: 2rpx solid #ddd;
        border-radius: 6rpx;
        margin-right: 12rpx;
        margin-top: 4rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        flex-shrink: 0;
        
        &.checked {
          background: #a6c0fe;
          border-color: #a6c0fe;
        }
        
        .checkmark {
          color: white;
          font-size: 20rpx;
          font-weight: bold;
        }
      }
      
      .agreement-text {
        font-size: 26rpx;
        color: #666;
        line-height: 1.4;
        
        .agreement-link {
          color: #a6c0fe;
          text-decoration: none;
          cursor: pointer;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    
    .agreement-hint {
      display: block;
      font-size: 22rpx;
      color: #ff9800;
      margin-top: 12rpx;
      margin-left: 48rpx;
      animation: shake 0.5s ease-in-out;
    }
  }
  
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5rpx); }
    75% { transform: translateX(5rpx); }
  }
  
  .register-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #a6c0fe 0%, #c2a8fd 100%);
    color: white;
    border: none;
    border-radius: 16rpx;
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 40rpx;
    transition: all 0.3s ease;
    cursor: pointer;
    
    &:not(:disabled):active {
      transform: translateY(2rpx);
      box-shadow: 0 8rpx 16rpx rgba(166, 192, 254, 0.3);
    }
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    
    &.loading {
      background: linear-gradient(135deg, #ccc 0%, #ddd 100%);
    }
  }
  
  .login-link {
    text-align: center;
    
    .login-text {
      font-size: 28rpx;
      color: #666;
    }
    
    .login-btn {
      font-size: 28rpx;
      color: #a6c0fe;
      font-weight: 600;
      cursor: pointer;
      margin-left: 8rpx;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
